const options = [{
		label: '选项1',
		value: 1,
		children: [
			{ label: '选项1-1', value: 11 },
			{ label: '选项1-2', value: 12 }
		]
	},
	{
		label: '选项2',
		value: 2,
		children: [
			{ label: '选项2-1', value: 21 },
			{ label: '选项2-2', value: 22 }
		],
	}
];

const { $val, $ref } = JiessCore;
export default function() {
	const param = {};
	if (env === 'react-antd') {
		param.title = '级联面版'
	} else {
		param.header = '级联面版'
		param.formParam = { labelWidth: '108px' }
	}

	const area = this.area(param);
	// 每一次的add会构建一个单独
	area.add(
		$Cascader({
			$name: 'cas1',
			$label: '基础用法',
			options
		})
	);
	// 当多个下拉框同时都需要使用相同的异步下拉源数据，建议使用响应式方案
	const opts = $ref([]);
	setTimeout(() => {
		opts.value = options;
	}, 1600);

	area.add(
		$Cascader({
			$name: 'cas2',
			$label: '响应式下拉',
			options: $val(opts, 'value'),
		})
	);


	if (env === 'react-antd') {} else {
		// 级联面版
		area.add(
			$CascaderPanel({
				$name: 'panel1',
				$label: '响应式下拉',
				$span: 24,
				options: $val(opts, 'value'),
			})
		);
	}

	// 元素添加完毕，确定渲染
	const action = area.done();
}